<template>
  <div id="nav_bar">
    <div class="nav_bar">
      <div></div>
      <div><p>仿微信页面</p></div>
      <div>
        <van-button
          icon="search"
          round
          size="small"
          color="green"
          @click="message"
        />
        <van-popover
          v-model:show="showPopover"
          placement="bottom-end"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-button icon="plus" round size="small" color="green" />
          </template>
        </van-popover>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const showPopover = ref(false);
    const onClickRight = (index) => console.log(index, "按钮");
    const actions = [
      { text: "发起群聊", icon: "wechat", path: "groupChat" },
      { text: "添加朋友", icon: "add-o" , path: "addfriends"},
      { text: "扫一扫", icon: "enlarge" , path: "saoma"},
      { text: "收付款", icon: "gold-coin" , path: "givemoney"},
    ];
    return {
      onClickRight,
      actions,
      showPopover,
    };
  },
  methods: {
    onSelect(item) {
      console.log(item.text);
      this.$router.push('/'+item.path)
    },
    message() {
      alert("消息");
    },
  },
};
</script>

<style>
#nav_bar{
  /* position: fixed;
  top: 0;
  */
}
.nav_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* position: fixed;
  top: 0;
  height: 46px; */
}
</style>